<template>
    <!-- 安全中心组件 -->
  <div class="install">
      <div class="back-nav-box">
          <back-nav left-arrow left-text='返回' title='安全中心' ></back-nav>
      </div>
    <!-- 图片背景 -->
        <div class="my-img">
            <img class="auto-img" :src="imgUrl" alt="">
        </div>
        <!-- 我的详情盒子 -->
        <div class="my-box" >
            
            <div class="collect-box info-item">
                <div class="text-left">修改密码</div>
                <div class="text-right" @click="changePass">
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                </div>
                
            </div>
            <div class="info-box info-item">
               <div class="text-left">注销账号</div>
                <div class="text-right" @click="comfirms">
                   <i class="fa fa-angle-right" aria-hidden="true"></i>
                </div> 
               
            </div>
                    
        </div>
        <div class="btn">
            <button class="login" @click="logout">退出登录</button>
        </div>
        <!-- 遮罩层 -->
        <div class="wrapper-set" v-show="see">
            <div class="wrapper-box">
                <div class="wrapper-right">
                <span>修改密码</span>
                <div  @click="closeWra">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </div>
                </div>
                 <van-field
            v-model="userInfo.oldpassword"
            :type="isOpen?'text':'password'"
            name="password"
            label="旧密码"
            placeholder="旧密码(首字符必须为字母)"
            :right-icon="isOpen?'eye-o':'closed-eye'"
            autocomplete="off"
            @click-right-icon="toggleStatus"
            :rules="[{ required: true, message: '请填写密码' },{pattern:passwordReg,message:'数字字母下划线组合以字母开头6-16位'}]"
          />
           <van-field
            v-model="userInfo.newpassword"
            :type="isOpen?'text':'password'"
            name="password"
            label="新密码"
            placeholder="新密码(首字符必须为字母)"
            :right-icon="isOpen?'eye-o':'closed-eye'"
            autocomplete="off"
            @click-right-icon="toggleStatus"
            :rules="[{ required: true, message: '请填写密码' },{pattern:passwordReg,message:'数字字母下划线组合以字母开头6-16位'}]"
          />
          <div class="login-btn" style="margin: 40px;">
            <van-button round block type="info" native-type="button" @click="updatePassword">提交</van-button>
          </div>
            </div>
        </div>
  </div>
</template>

<script>
import BackNav from '../components/BackNav.vue'
export default {
    name: 'Install',
    components:{
        BackNav
    },
    data() {
        return {
        //背景
        imgUrl:require('../assets/images/orderbg.png'),
        //密码框样式
        isOpen: false,
        // 修改密码触发
        see: false,
        userInfo: {
            oldpassword: '',
            newpassword: '',
        },
        //验证密码(数字字母下划线组合并且以字母开头6-16位)
        passwordReg: /^[A-Za-z]\w{5,15}$/
        }
    },
  
    methods: {
        //注销账户
        comfirms() {
            this.$dialog.confirm({
                title: '注销账号',
                message: '是否确定注销账号,一旦注销无法恢复!'
            }).then(() => {
                // on confirm 确认
                this.axios({
                    method: 'post',
                    url: '/destroyAccount',
                }).then(res=>{
                    
                    this.$router.push({name: 'Menu'});
                })

            })
            .catch(() => {
                // on cancel

            });
        },

        //退出登录
       logout() {
           this.axios({
               method: 'post',
               url: '/logout',
               
           }).then(res=>{
            //    
               if(res.data.code=='F001') {
                   this.$toast(res.data.msg);
                   this.$router.push({name: 'Menu'});
               }
           }).catch(err=>{
               
           })
       }, 
       
       //切换密码框显示隐藏状态
       toggleStatus() {
           this.isOpen=!this.isOpen;
       },
      
       //关闭wrapper遮罩层
        closeWra() {
            this.see = false;
        },
       // 修改密码
       changePass() {
           this.see=true;
       },      
       //修改密码
       updatePassword() {
           if(this.userInfo.oldpassword!=""&&this.userInfo.newpassword!="") {
               this.axios({
               method: 'post',
               url: '/updatePassword',
               data: {
                   password: this.userInfo.newpassword,
                   oldPassword: this.userInfo.oldpassword
               }
           }).then(res=>{
            //    
               //旧密码不正确
               if(res.data.code=='E003') {
                   this.$toast(res.data.msg);
               }
               //成功修改密码
               if(res.data.code=='E001') {
                   this.$toast(res.data.msg);
                   this.$router.push({name: 'Login'});
               }
           })
           }else{
               this.$toast('请输入新旧密码');
           }
       }
        
    }
}
</script>

<style lang='less' scoped>
@import url('../assets/base.less');
.btn {
    position: absolute;
    top:400px;
    left: calc(50% - 150px); 
    .login {
        padding: 10px 120px;
        background-color: @mainColor;
        border: none;
        border-radius: 30px;
        outline:0;
        color:#fff;
        font-size:14px;
    }
}
.install{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
}
.back-nav-box {
    position:sticky;
    top:0;
    color:@mainColor;
}
.text-img {
    width:45px;
    height:45px;
    border-radius: 50%;
    background-color: thistle;
    overflow: hidden;
}
.info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding:15px 0;
    font-size: 16px;
}
.text-right {
    font-size: 25px;
    color:#999;
    margin-right: 5px;

}
.info-box {
    border-bottom:0;
}

.my-img {
    width:100%;
    height:100px;
    background-color: @bg_Color;
}
.my-box {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255,255,255,.9);
    position: relative;
    top:-20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
.wrapper-set {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  .wrapper-box {
    position: relative;
    bottom: -300px;
    height: 40%;
    overflow: hidden;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 100px;
    background-color: #fff;
    .wrapper-right {
      width: 100%;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 5;
      font-size: 16px;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: inline-block;
        flex: 1;
      }
      i {
        display: inline-block;
        width: 20px;
        color: #999;
        font-size: 20px;
      }
    }
  }
}
</style>